<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    爱好：
    <select v-model="hobby">
      <option value="">请选择</option>
      <option value="0">唱</option>
      <option value="1">跳</option>
      <option value="2">rep</option>
    </select>
    <hr>
    年份：
    <select v-model="date.year">
      <option value="">请选择</option>
      <option value="2023">2023</option>
      <option value="2024">2024</option>
      <option value="2025">2025</option>
    </select>
    月份：
    <select v-model="date.month">
      <option value="">请选择</option>
      <option value="4">4</option>
      <option value="5">5</option>
      <option value="6">6</option>
    </select>
  </div>

  <script type="module">
    import { createApp, ref, reactive, watch } from '../vue.esm-browser.js'
    createApp({
      setup() {
        const hobby = ref('') //爱好
        const date = reactive({ //日期
          year: '2023',
          month: '4'

        })
        watch(hobby, (newValue, oldValue) => {
          console.log('newValue:', newValue, 'oldValue:', oldValue);
        })
        /*
        JS中对象和数组是通过引用传递的, 而不是通过值传递
        当修改对象或数组的值时, 实际上修改的是对象或数组的引用, 而不是创建一个新的对象或数组
        所以，如果修改了对象或数组的值，那么打印出来的结果则是修改后的值
                */
        watch(date, (newValue, oldValue) => {
          console.log('newValue:', newValue, 'oldValue:', oldValue);
        })
        //单独进行监听
        watch(() => date.year, (newValue, oldValue) => {
          console.log('newValue:', newValue, 'oldValue:', oldValue);
          //还可以进行判断
          if (newValue == 2025) {
            console.log('666');
          }
        })
        return { hobby, date }
      }
    }).mount('#app')

  </script>
</body>

</html>